<template>
  <div class="Footer">
    <h1>Footer</h1>
    <h1>电影列表 <button @click="getMovieList">获取</button></h1>
    <ul>
      <li v-for="item in movieList" :key="item.tvId">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Footer",
  computed: {
    ...mapState(["count", "movieList"]),
  },
  methods: {
    //在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：
    /*  getMovieList() {
      this.$store.dispatch("getMovieList");
    }, */
    ...mapActions(["getMovieList"]),
  },
};
</script>

<style scoped>
.Footer {
  width: 300px;
  margin: 0 auto;
  background-color: chocolate;
}
</style>
